<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <title>Title</title>
<!--    <script src="../../tempresources/vue.js"></script>-->
<!--    <script src="../../tempresources/axios.js"></script>-->
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<style>
    body{
        background-image: url("../../img/v2-cb8198799ca848b78bac864e9cbc377d_r.jpg");
    }
    #app{
        width: 400px;
        height: 250px;
        background-color: cornsilk;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;

    }
    #a{
        height:10%;
        text-align: center;
    }
    #reset-button{
        text-align: center;
    }
    #kong{
        height: 20px;
    }
</style>

<body>
<div id="a"><h1><font color="#f0ffff">登录界面</font></h1></div>
<div id='app'>
        用户名：
        <input type="text" v-model="empoyee.name"></br>
        密码：&nbsp;&nbsp;&nbsp;
        <input type="password" v-model="empoyee.password"></br>
        <div id="kong"></div>
        <div id="reset-button"><button @click="sub()">登录</button></div>
    <span><font color="#ff2018">{{msg}}</font></span>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            empoyee:{
                name:'',
                password:""
            },
            msg:''
        },
        methods:{
            sub(){
                var _this=this
                let data=this.empoyee//这里要这样，这样后台收得到
                axios({
                    // url:"http://192.168.43.102:8080/empoyee/login",
                    url:"/empoyee/login",
                    method:"post",
                    data:data
                }
                ).then(function (res){
                    // alert(JSON.stringify(res.data))//转格式json

                    const ret=res.data//这里要一个临时变量接受
                    //res.data==>{code:##,msg:##,data:{...}}

                    if(ret.code == 1){
                        localStorage.setItem('empoyee',JSON.stringify(ret.data))//保存信息

                        // localStorage.setItem('key',var v);将变量imgs存储到name字段
                        // var v = localStorage.getItem("key");获取指定key本地存储的值
                        //类似cookie

                        window.top.location.href= '../buckindex.html'//跳转后台页面
                    }
                    else
                        _this.msg=ret.msg
                    // alert(ret.msg)
                }
                )
            }
        }
    })
</script>
</body>
</html>